<demo>
## 基础用法
基础用法
</demo>

<!-- #region snippet -->
<script setup>
import { ref } from 'vue'

const listData = ref([
  {
    label: 'content 1',
    value: '1',
    children: [
      { label: 'content 1-1', value: '1-1' },
      { label: 'content 1-2', value: '1-2' },
    ],
  },
  {
    label: 'content 2',
    value: '2',
    children: [
      { label: 'content 2-1', value: '2-1' },
      { label: 'content 2-2', value: '2-2' },
    ],
  },
  {
    label: 'content 3',
    value: '3',
    disabled: true,
    children: [
      { label: 'content 3-1', value: '3-1' },
      { label: 'content 3-2', value: '3-2' },
    ],
  },
  {
    label: 'content 4',
    value: '4',
    checkable: false,
    children: [
      { label: 'content 4-1', value: '4-1' },
      { label: 'content 4-2', value: '4-2' },
    ],
  },
])
const selectedKeys = ref([])
</script>

<template>
  <x-transfer
    v-model="selectedKeys"
    :data-source="listData"
    :style="{ width: '680px' }"
    show-check-all
  />
</template>

<style lang="less" scoped></style>
<!-- #endregion snippet -->
